<template>
    <view class="event-item" @click="gotoDetail(data)">
        <view class="event-top"
            :class="[data.taskStatus == 1 && 'event-top-green', data.taskStatus == 2 && 'event-top-red']">
            <image class="event-top-bg" mode="widthFix" :src="getBg(data.taskStatus)"></image>
            <view class="event-top-center flex1">{{ data.name }}</view>
            <view class="event-top-right">{{ getValueName(data.taskStatus) }}</view>
        </view>
        <view class="event-content">
            <view class="ellipsis-2  ">
                {{ data.content }}
            </view>
            <view class="event-line"></view>
            <view class="flex-between font-24 text-grey1  ">
                <view class="flex1">开始：{{ data.startTime }}</view>
                <view class="flex1">结束：{{ data.endTime }}</view>
            </view>
        </view>
        <view class="event-btn" v-if="data.taskStatus == 0">立即处理</view>
    </view>
</template>

<script>

export default {
    name: 'SpecialItme',
    props: {
        data: {
            type: Object, default: {}
        }
    },
    computed: {
    },
    methods: {
        getValueName(type) {
            switch (type) {
                case 0:
                    return '待处理'
                case 1:
                    return '已完成'
                case 2:
                    return '已延期'

            }
        },
        getBg(type) {
            switch (type) {
                case 0:
                    return '/static/icon/icon-item-bg-blue.png'
                case 1:
                    return '/static/icon/icon-item-bg-green.png'
                case 2:
                    return '/static/icon/icon-item-bg-red.png'

            }
        },
        gotoDetail(item) {
            if (this.data.taskStatus == 0) {
                uni.navigateTo({
                    url: `/pages/special-task/handle/index?id=${item.id}`
                })
            } else {
                uni.navigateTo({
                    url: `/pages/special-task/detail/index?id=${item.id}`
                })
            }

        },
    }
}
</script>
<style lang="scss">
.event-item {
    width: 686rpx;
    background: #FFFFFF;
    border-radius: 4rpx;
    margin: auto;

    .event-top {
        height: 64rpx;
        background-image: linear-gradient(90deg, #006eff33 2%, #006eff0a 100%);
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 28rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #006EFF;

        .event-top-bg {
            width: 686rpx;
            height: 64rpx;
            position: absolute;
            top: 0;
            left: 0;
        }

        .event-top-right {
            width: 100rpx;
            text-align: right;
            font-size: 24rpx;
        }
    }

    .event-top-red {
        background-image: linear-gradient(90deg, #ff11031c 2%, #f92e200d 100%);
        color: #FF1103;
    }

    .event-top-green {
        background-image: linear-gradient(90deg, #07c1601c 2%, #0cc2640d 100%);
        color: #07C160;
    }

    .margin-16 {
        margin: 16rpx 0;
    }

    .event-line {
        width: 100%;
        height: 2rpx;
        background: #EEEEEE;
        margin: 32rpx 0 16rpx;
    }

    .event-content {
        background: #FFFFFF;
        box-shadow: 0 4rpx 12rpx 0 #1e71fe14;
        padding: 24rpx;
    }

    .event-btn {
        font-weight: 500;
        font-size: 24rpx;
        color: #006EFF;
        text-align: center;
        width: 100%;
        height: 70rpx;
        line-height: 70rpx;
    }
}
</style>
